@import './base.css';
@import './anim.css';

body {
  display: flex;
  place-items: center;
}

#app {
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

a,
.green {
  text-decoration: none;
  color: rgb(8, 157, 134);
  transition: 0.4s;
}

b{
  font-weight: bold;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

.shadow{
    box-shadow: 0 1px 3px 2px var(--color-shadow);
}

.scrollable{
    overflow-y:auto;
    overflow-x:auto;
}
.hover-scrollable{
    overflow-x:hidden;
    overflow-y:hidden;
}
.hover-scrollable:hover{
    overflow-x:auto;
    overflow-y:auto;
}

.non-selectable{
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

}

/* scrollbar */
html{
  --scrollbarBG: var(--color-background-soft);
  --thumbBG: var(--color-border);
}
body, .panel, .scrollable, .hover-scrollable{
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar, 
.panel::-webkit-scrollbar, 
.scrollable::-webkit-scrollbar,
.hover-scrollable::-webkit-scrollbar{
  width: 11px;
}
body::-webkit-scrollbar-track, 
.panel::-webkit-scrollbar-track, 
.scrollable::-webkit-scrollbar-track, 
.hover-scrollable::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb, 
.panel::-webkit-scrollbar-thumb, 
.scrollable::-webkit-scrollbar-thumb,
.hover-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

input[type="text"],input[type="password"]{
  /* border: 1px solid var(--color-border); */
  border: transparent;
  color: var(--color-text);
  height: 24px;
  border-radius: 8px;
  padding-left: 4px;
  font-size: small;
  background-color: var(--color-background-soft);
  background-color: transparent;
  /* box-shadow: inset 0 0px 2px 1px var(--color-shadow); */
}

textarea{
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: var(--color-background);
  color: var(--color-text);
}
input[type="button"], button{
  border-radius: 5px;
  height: 24px;
  border: 1px solid var(--color-border);
  background-color: var(--color-background-soft);
  font-size: small;
  /* background-color: transparent; */
  color: var(--color-text);
}
input[type="button"]:hover, button:hover{
  background-color: var(--color-background-theme-highlight);
  transition: all 0.15s;
}
select{
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: var(--color-background-soft);
  background-color: transparent;
  color: var(--color-text);
  -webkit-appearance: none;
}